<template>
  <view class="order_item_container">
    <!-- <van-toast id="van-toast" /> -->
    <!-- 图标色值 底色 #000000 蓝色 #0078FF 紫红色 #D4237A  黄色 #FBA325-->
    <!-- <van-cell-group class="cell-group"> -->
    <uni-list style="width: 100%" :border="false">
      <!--  -->
      <uni-list-item
        :border="false"
        title="SOC"
        thumb="/static/orderDetail/soc.png"
        thumb-size="base"
        :rightText="machineInfo.soc + 'V'"
      />
      <uni-list-item
        :border="false"
        title="电压"
        thumb="/static/orderDetail/ic_v.png"
        thumb-size="base"
        :rightText="machineInfo.deviceVoltage + 'V'"
      />
      <uni-list-item
        :border="false"
        title="电流"
        thumb="/static/orderDetail/ic_a.png"
        thumb-size="base"
        :rightText="machineInfo.deviceCurrent + 'A'"
      />
      <uni-list-item
        :border="false"
        title="功率"
        thumb="/static/orderDetail/ic_p.png"
        thumb-size="base"
        :rightText="machineInfo.devicePower + 'KW'"
      />
      <!-- TIPS：等于3跟不等于3的取值没有不同 没有删除这段代码 -->
      <!-- <van-cell class="my-cell-group" title="功率">
        <view slot="icon" class="my-icon-img order">
          <image class="icon-img" src="/static/orderDetail/ic_p.png" />
        </view>
        <view class="van-cell-text">
          <view v-if="orderInfo.orderType == 3"
            >{{ machineInfo.devicePower }}KW</view
          >
          <view v-if="orderInfo.orderType != 3"
            >{{ machineInfo.devicePower }}KW</view
          >
        </view>
      </van-cell> -->
      <uni-list-item
        :border="false"
        title="充电度数"
        thumb="/static/orderDetail/ic_du.png"
        thumb-size="base"
        :rightText="orderInfo.chargeDegree + '度'"
      />
      <!-- </van-cell-group> -->
    </uni-list>
    <view class="line"></view>
    <uni-list style="width: 100%" :border="false">
      <uni-list-item
        :border="false"
        title="电价信息"
        thumb="/static/orderDetail/ic_time.png"
        thumb-size="base"
        :rightText="orderChargeTime(orderInfo.dpcMinute)"
      />
      <uni-list-item
        :border="false"
        title="预付款金额"
        thumb="/static/orderDetail/ic_price.png"
        thumb-size="base"
        :rightText="orderInfo.forzenPrice + '元'"
      />
      <uni-list-item
        :border="false"
        title="当前充电站点"
        thumb="/static/orderDetail/ic_location.png"
        thumb-size="base"
        :rightText="orderInfo.stationName"
      />
      <uni-list-item
        :border="false"
        title="充电终端编号"
        thumb="/static/orderDetail/ic_no.png"
        thumb-size="base"
        :rightText="orderInfo.deviceCode"
      />
    </uni-list>
    <view class="line"></view>
    <uni-list style="width: 100%" :border="false">
      <uni-list-item
        :border="false"
        title="订单创建时间"
        thumb="/static/orderDetail/icon_dpcMinute.png"
        thumb-size="base"
        :rightText="formatDate(createTime)"
      />
      <uni-list-item
        :border="false"
        title="已充电时间"
        thumb="/static/orderDetail/ic_charge.png"
        thumb-size="base"
        :rightText="orderInfo.chargeTime"
      />
      <uni-list-item
        :border="false"
        title="当前状态"
        thumb="/static/orderDetail/ic_status.png"
        thumb-size="base"
        :rightText="handleType(orderInfo.type)"
      />

      <!-- <van-cell class="my-cell-group" title="当前状态">
        <view slot="icon" class="my-icon-img order">
          <image class="icon-img" src="/static/orderDetail/ic_status.png" />
        </view>
        <view class="van-cell-text">
          <view class="line-content" v-if="orderInfo.type == 6">退款中</view>
          <view class="line-content" v-else-if="orderInfo.type == 5"
            >已结束</view
          >
          <view class="line-content" v-else-if="orderInfo.type == 2"
            >充电中</view
          >
          <view class="line-content" v-else-if="orderInfo.type == 1"
            >已支付</view
          >
          <view class="line-content" v-else-if="orderInfo.type == 0"
            >待支付</view
          >
          <view class="line-content" v-else>待定</view>
        </view>
      </van-cell> -->
      <uni-list-item
        :border="false"
        title="充电时长"
        thumb="/static/orderDetail/icon_time_cd.png"
        thumb-size="base"
        :rightText="orderChargeTime(orderInfo.dpcMinute)"
      />
      <!-- <van-cell
        class="my-cell-group"
        title="充电时长"
        v-if="orderInfo.dpcOrder == 1"
      >
        <view slot="icon" class="my-icon-img order">
          <image
            class="icon-img"
            src="/static/orderDetail/icon_dpcMinute.png"
          />
        </view>
        <view class="van-cell-text">{{
          orderChargeTime(orderInfo.dpcMinute)
        }}</view>
      </van-cell> -->

      <!-- <van-cell class="my-cell-group" title="模式">
    <view slot="icon" class="my-icon-img order" wx:if="{{ orderInfo.deviceModel != 2 ||orderInfo.deviceModel != 1 }}">
      <image class="icon-img" src="../../static/orderDetail/icon_mode.png" />
    </view>
    <view class="van-cell-text">
      <view class='line-content' wx:if="{{orderInfo.deviceModel==1}}">
        直流
      </view>
      <view class='line-content' wx:if="{{orderInfo.deviceModel==2}}">
        交流
      </view>
    </view>
  </van-cell> -->
      <!-- </van-cell-group> -->
    </uni-list>
    <view class="line"></view>

    <view class="order_line_bottom">
      <image class="line-img" src="/static/orderDetail/ic_qb.png"></image>
      <view class="line-bottom-text">实时充电金额：</view>
      <view class="line-bottom-content"
        >¥ {{ orderInfo.chargePrice || 0 }}</view
      >
    </view>

    <view class="order_bottom_btn">
      <button
        class="submit_btn"
        v-if="type == 0"
        type="primary"
        @tap="closeCharge"
      >
        取消订单
      </button>
      <view class="hasStop" v-if="type == 1">已支付</view>
      <button
        class="submit_btn"
        v-if="type == 2"
        type="primary"
        @tap="stopCharge"
      >
        停止充电
      </button>
      <button class="submit_btn" v-if="type == 3">停止中</button>
      <view class="hasStop" v-if="type == 5">已结束</view>
      <view class="hasStop" v-if="type == 6">已退款</view>
    </view>
  </view>
</template>
<!-- <script module="filters" lang="wxs" src="@/pages/utils/filter.wxs"></script> -->
<script>
import { orderChargeTime, formatDate } from "@/utils/util"
const app = getApp();
let Sign = app.globalData.Sign;
let Store = app.globalData.Store;
let Api = app.globalData.Api;
// import Toast from '@vant/weapp/toast/toast';
// pages/orderDetail/orderDetail.js
export default {
  data() {
    return {
      orderChargeTime: orderChargeTime,
      formatDate: formatDate,
      orderInfo: {
        orderType: 0,
        chargeDegree: '',
        forzenPrice: '',
        stationName: '',
        deviceCode: '',
        dpcOrder: 0,
        chargeTime: '',
        type: 0,
        chargePrice: ''
      },
      machineInfo: {
        soc: '',
        deviceVoltage: '',
        deviceCurrent: '',
        devicePower: ''
      },
      orderId: '',
      type: '-1',
      createTime: '',
      ifRunData: true
    };
  },
  onLoad: function (options) {
    // this.setData({
    this.orderId = options.orderId
    // });
  },
  onShow: function () {
    // this.setData({
    this.ifRunData = true
    // });
    this.getOrderInfo();
    this.setTimeTo();
  },
  onHide: function () {
    // this.setData({
    this.ifRunData = false
    // });
  },
  onUnload: function () {
    // this.setData({
    this.ifRunData = false
    // });
  },
  methods: {
    handleType(type) {
      switch (type) {
        case 6:
          return '退款中'
        case 5:
          return '已结束'
        case 2:
          return '充电中'
        case 1:
          return '已支付'
        case 0:
          return '待支付'
        default:
          return '待定'
      }
    },
    setTimeTo: function () {
      let that = this;
      setTimeout(function () {
        that.timing();
      }, 30000); //5分钟 =300000毫秒 //1分(min)=60000毫秒(ms)
    },

    timing: function () {
      if (this.ifRunData) {
        this.getOrderInfo();
        this.setTimeTo();
      }
    },

    getOrderInfo: function () {
      // Toast.loading({
      //   message: '加载中...',
      //   forbidClick: true,
      //   duration: 0
      // });
      uni.showToast({
        title: '加载中 ...',
        icon: 'success',
        duration: 2000
      });
      let orderId = this.orderId;
      const signObject = {
        orderId
      };
      const signvalue = Sign.signutil(signObject);
      app.globalData
        .get(Api.getOrderInfo, {
          orderId,
          sign: signvalue
        })
        .then((res) => {
          // Toast.clear();
          //console.log(res.orderInfo)

          // this.setData({
          this.orderInfo = res.orderInfo,
            this.machineInfo = res.machineInfo,
            this.type = res.orderInfo.type,
            this.createTime = res.orderInfo.createTime,
            this.ifRunData = true
          // });
        })
        .catch((e) => {
          // Toast.clear();
          console.log(e);
        });
    },

    stopCharge: function () {
      let that = this;
      let orderId = this.orderInfo.id;
      const signObject = {
        orderId
      };
      const signvalue = Sign.signutil(signObject);
      app.globalData
        .get(Api.stopCharge, {
          orderId,
          sign: signvalue
        })
        .then((res) => {
          // wx.reLaunch({
          //   url: '../orderList/orderList?fromStop=1',
          // })
          uni.showToast({
            title: '正在停止 ...',
            icon: 'success',
            duration: 2000
          });
          // that.setData({
          this.type = 3
          // });
          setTimeout(function () {
            that.getOrderInfo();
          }, 5000); //5分钟 =300000毫秒 //1分(min)=60000毫秒(ms)
        })
        .catch((e) => {
          console.log(e);
        });
    },

    closeCharge: function () {
      let orderId = this.orderInfo.id;
      let user_id = Store.getItem('user_id');
      const signObject = {
        orderId,
        user_id
      };
      const signvalue = Sign.signutil(signObject);
      app.globalData
        .get(Api.closeCharge, {
          orderId,
          user_id,
          sign: signvalue
        })
        .then((res) => {
          uni.reLaunch({
            url: '../orderList/orderList'
          });
        })
        .catch((e) => {
          console.log(e);
        });
    }
  }
};
</script>
<style>
@import "./orderDetail.css";
</style>
